<!--底部导航-->
<template>
  <!-- 底部tabbar    start -->
  <nav class="mui-bar mui-bar-tab mui-row tabbar-bottom schedule-foot">
    <a @click="clickNav(0)" class="mui-col-xs-4 mui-col-sm-4 flex-column flex-center" href="javascript:void(0)">
      <img v-if="workFooterBarIndex!=0" src="../../../../static/images/zzsh_richeng.png" alt="日程">
      <img v-if="workFooterBarIndex==0" src="../../../../static/images/zzsh_richeng_on.png" alt="日程">
      <p class="mui-tab-label">日程</p>
    </a>
    <a @click="clickNav(1)" class="mui-col-xs-4 mui-col-sm-4 flex-column flex-center" href="javascript:void(0)">
      <img v-if="workFooterBarIndex!=1" src="../../../../static/images/zzsh_record.png" alt="记录">
      <img v-if="workFooterBarIndex==1" src="../../../../static/images/zzsh_record_on.png" alt="记录">
      <p class="mui-tab-label">记录</p>
    </a>
    <a v-if="flag" @click="clickNav(2)" class="mui-col-xs-4 mui-col-sm-4 flex-column flex-center" href="javascript:void(0)">
      <img v-if="workFooterBarIndex!=2" src="../../../../static/images/zzsh_tongji.png" alt="统计">
      <img v-if="workFooterBarIndex==2" src="../../../../static/images/zzsh_tongji_on.png" alt="统计">
      <p class="mui-tab-label">统计</p>
    </a>
  </nav>
  <!-- 底部tabbar    end -->
</template>
<script>
  import tools from '@/utils/tools'
export default {
  name: 'footerbar',
  data () {
    return {
      fn: tools,
      navList: ['schedule', 'record', 'statistics'],
      workFooterBarIndex: this.$store.state.workFooterBarIndex || 0,
      flag: false
    }
  },
  created () {
    this.$store.state.workFooterBarIndex = this.workFooterBarIndex = this.navList.indexOf(this.$route.name)
    window.loginPage = () => {
      this.$router.push({'name': 'login'})
    }
    try {
      if (this.$localStorage.get('userInfo')) {
        this.$store.state.userInfo = this.$localStorage.get('userInfo')
      } else {
      }
      if (this.$localStorage.get('roleType')) {
        let roleType = this.$localStorage.get('roleType')
        if (this.fn.hasDwbRoleType(roleType)) {
          this.flag = true
        }
      }
    } catch (e) {
    }
  },
  methods: {
    clickNav (index) {
      this.currentIndex = index
      this.$store.state.workFooterBarIndex = index
      this.$router.push({'name': this.navList[index]})
    }
  },
  watch: {
    $route (to, from) {
    }
  },
  mounted () {
  }
}
</script>

<style scoped="" lang="scss">
  .schedule-foot {
    display:flex;
    .flex-column {
      flex:1;float:none;
    }
  }
</style>
